import type { FC } from 'react';
import { modalGroupDefaultProps } from './defaultProps';
import { ModalContextProvider, useModalContext } from './ModalContext';
import type { ModalGroupOptions } from './type';
import Dimmer, { DimmerProps } from '../dimmer';
import classNames from 'classnames';

export interface ModalGroupProps extends ModalGroupOptions, DimmerProps {}

const Child: FC<ModalGroupProps> = (props) => {
  const { className, ui, children, forwardedRef, ...modalGroupProps } = props;
  const [states] = useModalContext();

  return (
    <Dimmer
      {...modalGroupProps}
      forwardedRef={forwardedRef}
      ui={ui}
      className={classNames('modals', className)}
      contentWapper={false}
      active={states.active}
      page
    >
      {children}
    </Dimmer>
  );
};

const ModalGroup: FC<ModalGroupProps> = (props) => {
  return (
    <ModalContextProvider initialValue={{ active: props.active }}>
      <Child {...props} />
    </ModalContextProvider>
  );
};

ModalGroup.displayName = 'ModalGroup';
ModalGroup.defaultProps = modalGroupDefaultProps;

export default ModalGroup;
